<template lang="pug">
.table-kpi-wrap
  table.kpi-table
    tr.table-header
      th
        span 分区名称
      th(@click="sortKpiList('dws')")
        span 分区供水量(m³)
          span.iconfont.icon-sort
      th(@click="sortKpiList('lucw')")
        span 大用户用水量(m³)
          span.iconfont.icon-sort
      th(@click="sortKpiList('avgPressure')")
        span 平均压力(m)
          span.iconfont.icon-sort
      th(@click="sortKpiList('nrw')")
        span 产销差水量(m³)
          span.iconfont.icon-sort
      th(@click="sortKpiList('nrwRate')")
        span 产销差比率(%)
          span.iconfont.icon-sort
  table.kpi-table
    tr(
      v-for="(item,index) in kpiList"
      :class="{'active-tr':item.id===callbackData.areaId }"
      @click="selectArea(item.id,index)")
      td(:class="{'bg-white':!(index%2)}") {{item.name?item.name:'-'}}
      td(:class="{'bg-white':!(index%2)}") {{item.dws|nullValue}}
      td(:class="{'bg-white':!(index%2)}") {{item.lucw|nullValue}}
      td(:class="{'bg-white':!(index%2)}") {{item.avgPressure || item.avgPressure === 0 ? parseFloat(item.avgPressure * 100).toFixed(3) : '-'}}
      td(:class="{'bg-white':!(index%2)}") {{item.nrw|nullValue}}
      td(:class="{'bg-white':!(index%2)}") {{item.nrwRate|nullValue}}
</template>

<script>
/**
 * @name TableKPI 分区绩效信息列表
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示分区的数据统计
 *参数：
 */
import DataTablePage from '@/containers/DataTablePage'
export default {
  props: {
    callbackData: {
      type: Object,
      default: () => {
        return {
          timeRange: [new Date(), new Date()],
          areaId: 1
        }
      }
    }
  },
  components: {
    DataTablePage
  },
  data () {
    return {
      kpiList: [],
      order: true
    }
  },
  methods: {
    getData () {
      this.$get({
        url: `/pn/dpa/stat/kpiNrw`,
        params: {
          // 'areaId': '',
          'startTime': this.callbackData.timeRange[0].getTime(),
          'endTime': this.callbackData.timeRange[1].getTime()
        }
      }).then((res) => {
        this.kpiList = res.data
      })
    },
    sortByKey (array, key, order) {
      return array.sort(function (a, b) {
        var x = a[key]
        var y = b[key]
        return order ? (x - y) : (y - x)
      })
    },
    sortKpiList (key) {
      this.order = !this.order
      return this.sortByKey(this.kpiList, key, this.order)
    },
    selectArea (id, index) {
      const params = {
        seriesIndex: 0,
        dataIndex: index
      }
      this.$emit('selectAreaPie', params)
    },
    fileEvent (url, filterBy) {
      this.$get({
        url,
        params: {
          'startTime': this.callbackData.timeRange[0].getTime(),
          'endTime': this.callbackData.timeRange[1].getTime()
        }
      }).then((res) => {
        // 生成a标签，模拟click下载files
        if (!res.data) {
          this.$alert('导出失败！')
          return
        }
        let a = document.createElement('a')
        a.href = `/api/dxbase/download/${res.data.shortUrl}`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        event.stopPropagation()
        event.preventDefault()
      })
    }
  },
  filters: {
    nullValue (val) {
      return val || val === 0 ? parseFloat(val).toFixed(3) : '-'
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="sass" scope>
.table-kpi-wrap
  width: 100%
  height: 100%
  overflow: hidden
  border: 20px solid #fff
  border-right: 35px solid #fff
  display: flex
  flex-direction: column
  overflow: auto
  .kpi-table
    // display: flex
    flex: 1
    align-items: stretch
    flex-direction: column
    color: #555555
    tr
      flex: 1
      display: flex
      max-height: 35px
      border-left: 1px solid #d1d1d1
      th,td
        border: 1px solid #d1d1d1
        border-left: 0
        background-color: #fff
        flex: 1
        height: 36px
        line-height: 36px
        text-align: center
        font-size: 12px
      th
        background-color: #e8ecef
        cursor: pointer
        display: flex
        align-items: center
        text-align: center
        font-weight: bold
        span
          margin: auto
          .icon-sort
            font-size: 12px
            color: #555555
      td
        background-color: #f7f8fa
        span
          margin-top: 4px
      .bg-white
        background-color: #fff
      &:hover
        cursor: pointer
        td
          background-color: #eaeff3 !important
    .active-tr
      td
        background-color: #eaeff3 !important
</style>
